<template>
  <div class="integral_award_record">
    <c-title :hide="false" :text="'抽奖记录'"></c-title>
    <div class="top">
      <img :src="topBg" class="bg">
      <div class="content">
        <div class="title">我的冻结积分</div>
        <div class="integral">{{ frozenIntegral }}</div>
      </div>
    </div>
    <div class="record-list">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="records.length ? '没有更多了' : ''"
          @load="getMyActivityRecord('list')"
        >
          <van-skeleton title :row="3" :loading="isSkeleton">
            <template v-if="records.length">
              <van-cell-group inset v-for="item in records" :key="item.reward_id">
                <van-cell>
                  <div class="record-title" slot="title">
                    <div class="title">场次：第{{ item.rank }}场</div>
                    <div class="status">{{ statusEnum[item.status] }}</div>
                  </div>
                  <van-row slot="label" gutter="10">
                    <van-col span="15" class="ellipsis">活动名称：{{ item.activity_name }}</van-col>
                    <van-col span="9">是否中奖：{{ isWinEnum[item.is_win] }}</van-col>
                    <van-col span="15">参与时间：{{ item.created_at }}</van-col>
                    <van-col span="9" v-if="item.is_win == 1">奖励积分：{{ item.integral }}</van-col>
                  </van-row>
                </van-cell>
              </van-cell-group>
            </template>
            <van-empty v-else description="暂无数据" />
          </van-skeleton>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import cTitle from "components/title";
const topBg = require('../../../assets/images/activity-top-bg@2x.png');
export default {
  components: { cTitle },
  data() {
    return {
      topBg,
      frozenIntegral: 0,
      records: [],
      isSkeleton: true,
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      refreshing: false,
      statusEnum: {
        1: '进行中',
        2: '已解散',
        3: '已开奖'
      },
      isWinEnum: {
        0: '未中奖',
        1: '已中奖',
        2: '待开奖'
      },
      isGetList: false
    };
  },
  methods: {
    /**
     * 获取参与记录
     */
    getMyActivityRecord: function(from) {
      if (from == 'list') {
        this.isGetList = true;
      }
      const that = this;
      $http.post('plugin.luck-new-draw.api.activity.myActivityRecord', {pageSize: this.pageSize, page: this.page}).then(function(response) {
        const { result, data } = response;
        if (result == 1) {
          const { total, list, frozen_integral} = data;
          that.frozenIntegral = frozen_integral;
          that.records = that.records.concat(list);
          if (that.records.length >= total) {
            that.finished = true;
          } else {
            that.page++;
          }
        } else {
          that.$dialog.alert({ message: response.msg || '数据获取失败' });
        }
      }).finally(function() {
        that.loading = false;
        that.refreshing = false;
        that.isSkeleton = false;
      });
    },

    /**
     * 列表下拉刷新
     */
    onRefresh: function() {
      // 清空列表数据
      this.finished = false;
      this.records = [];

      // 重置页码
      this.page = 1;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.isSkeleton = true;
      this.getMyActivityRecord();
    },
  },

  activated() {
    if (this.isGetList) {
      this.onRefresh();
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.integral_award_record {
  background-color: #fff;
  padding: 16px;

  .top {
    position: relative;

    .content {
      position: absolute;
      top: 45px;
      left: 24px;
      color: #fff;

      .title {
        font-size: 16px;
      }

      .integral {
        font-size: 40px;
      }
    }

    .bg {
      width: 100%;
    }
  }

  .record-list {
    margin-top: 15px;
    text-align: left;

    .van-cell-group {
      background-color: #F9EFE7;
      margin: 0;
      margin-bottom: 12px;

      .van-cell {
        background: transparent;
        box-sizing: border-box;

        .van-cell__title, .van-cell__label {
          overflow: hidden;
          max-width: 100%;
        }

        .record-title {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #e9e9e9;
          padding-bottom: 6px;
          margin-bottom: 8px;

          .title {
            font-size: 14px;
            font-weight: bold;
          }

          .status {
            color: #666;
            font-size: 12px;
          }
        }

        .van-row {
          color: #333;
          line-height: 200%;
          font-size: 12px;

          .ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
